<template>
  <div class="shopcar">
    <van-nav-bar
      title="购物车"
      :left-text="isEdit ? '完成' : '编辑'"
      @click-left="isEdit = !isEdit"
      fixed
    />
    <div v-if="token">
      <van-row v-for="item in shopcar" :key="item.id">
        <van-col span="4">
          <van-checkbox
            v-model="item.status"
            checked-color="#ee0a24"
            @click="changeItem"
          ></van-checkbox>
          <!-- <input type="checkbox" @change="changeItem" v-model="item.status" /> -->
        </van-col>
        <van-col span="20">
          <van-card
            :num="item.num"
            :price="item.price"
            :title="item.name"
            :thumb="item.img"
            :desc="item.properties"
          >
            <template #footer>
              <van-stepper v-model="value" />
            </template>
          </van-card>
        </van-col>
      </van-row>
    </div>
    <h1 v-else>没有登录，暂无数据</h1>
    <van-submit-bar
      :price="3050"
      :button-text="isEdit ? '删除' : '下单'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      isEdit: false,
      //是不是编辑状态
      token: localStorage.getItem("token") || "",
    });
    const shopcar = computed(() => {
      return store.state.shopcar;
    });

    const changeItem = () => {
      store.commit("changeItem");
    };

    const checkAll = () => {
      store.commit("checkAll");
    };

    const onSubmit = () => {
      if (data.isEdit) {
        store.commit("del");
      } else {
        router.push("/order");
      }
    };
    return { ...toRefs(data), shopcar, changeItem, checkAll, onSubmit };
  },
};
</script>

<style lang="scss" scoped>
.shopcar {
  padding: 55px 0 105px;
  .van-submit-bar {
    bottom: 50px !important;
  }
}
.van-checkbox {
  justify-content: center;
}
</style>
